{% stylesheet %}
  .block_collection_list .block_collection_product ul {
    display: grid;
    grid-row-gap: 30px;
    grid-column-gap: 30px;
    grid-template-columns: repeat(4, calc(25% - 22.5px));
  }
  .block_collection_list .block_collection_product li {
    list-style-type: none;
    line-height: 1.4;
    text-align: center;
  }
  .block_collection_list .block_collection_product .product_pic {
    margin-bottom: 26px;
    position: relative;
  }
  .block_collection_list .block_collection_product .soldout {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 50px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 14px;
  }
  .block_collection_list .block_collection_product .product_pic .product_img {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    width: 100%;
  }
  .block_collection_list .block_collection_product .product_pic img {
    max-width: 100%;
  }
  .block_collection_list .block_collection_product .block_product_name {
    margin-bottom: 4px;
    line-height: 1.5;
  }
  .block_collection_list .block_collection_product .product_price {
    font-weight: bold;
  }
  .block_collection_list .block_collection_product .product_oldprice {
    color: #888;
    text-decoration: line-through;
    margin-left: 5px;
    display: inline-block;
    font-weight: normal;
  }
  .block_collection_list .collection_product_pc_3 ul {
    grid-template-columns: repeat(3, calc(33.3333% - 20px));
  }
  .block_collection_list .collection_product_pc_4 ul {
    grid-template-columns: repeat(4, calc(25% - 22.5px));
  }
  .block_collection_list .collection_product_pc_5 ul {
    grid-template-columns: repeat(5, calc(20% - 24px));
  }
  .block_collection_list .block_collection_product_more {
    margin-top: calc(var(--general_layout_spacing) * 0.5);
    text-align: center;
  }
  .block_collection_list .block_collection_product_more a {
    margin: 0;
  }
  @media(max-width: 768px) {
    .block_collection_list .block_collection_product ul {
      grid-template-columns: repeat(3, calc(33.3333% - 20px));
    }
  }
  @media(max-width: 767px) {
    .block_collection_list .block_collection_product ul {
      grid-row-gap: 20px;
      grid-column-gap: 14px;
      grid-template-columns: repeat(2, calc(50% - 7px));
    }
    .block_collection_list .collection_product_wap_1 ul {
      display: block;
    }
    .block_collection_list .collection_product_wap_1 ul li {
      margin-bottom: 20px;
    }
    .block_collection_list .block_collection_product_more {
      margin-top: 30px;
    }
    .block_collection_list .block_collection_product .product_pic {
      margin-bottom: 16px;
    }
  }
{% endstylesheet %}

{% assign defaultImageEmpty = 'empty.png' | public_asset_abs_dir_url %}
{% assign defaultImageLoading = 'empty_loading.png' | public_asset_abs_dir_url %}

{% if section.settings.collection.id %}
  {% get_collection collections_id={section.settings.collection.id} %}
  {% assign collection = collection  %}
{% endif %}
{% assign blockId = block_id | default : section.block_id %}
<div class="block_collection_list">
  <div class="{% if section.settings.is_fill %}full_container_wrapper{% else %}container_wrapper{% endif %}">
    {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

    <div id="block_collection_product-{{blockId}}" class="block_collection_product collection_product_pc_{{ section.settings.pc_number }} collection_product_wap_{{ section.settings.wap_number }}">
      <ul>
        {% if section.settings.collection.id != "" %}
          {% get_products collection_id={section.settings.collection.id} limit={section.settings.product_number} %}
          {% comment %} {% assign hit_type_category = 'block_' | append: block_id %} {% endcomment %}
          {% for product in products %}
              {% include 'collection_product',product:product, collection_handle:collection.handle %}
          {% endfor %}
        {% else %}
          {% for i in (1..4) %}
            <li>
              <div class="product_pic">
                <a href="javascript:;"><img src="{{ defaultImageEmpty | public_front_asset_url }}"></a>
                {% if product.inventory_tracking %}
                  {% if product.inventory_quantity == "0" %}
                    <div class="soldout">{{ lang.general.sold_out }}</div>
                  {% endif %}
                {% endif %}
                <div class="discount_tag {{ theme_config.global.discount_label_style }}">
                  <div class="discount_tag_graphics"></div>
                  <div class="discount_tag_name">88%
                    <span>OFF</span>
                  </div>
                </div>
              </div>
              <div class="block_product_name">
                <a href="javascript:;">title</a>
              </div>
              <div class="product_price general_buying-color">$88.00<span class="product_oldprice general_original-color">$88.00</span>
              </div>
            </li>
          {% endfor %}
        {% endif %}
      </ul>
      {% if section.settings.more_text != ""%}
        <div class="block_collection_product_more">
          <a class="secondary_btn" href="/collections/{{ collection.handle }}">{{ section.settings.more_text }}</a>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% schema %}
{
	"tag": "",
	"class": "block_collection_list",
	"is_global": false,
	"name": {
		"zh_CN": "专辑商品",
		"en_US": "Collection"
	},
	"max_blocks": "20",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_collection",
			"label": {
				"zh_CN": "选择专辑",
				"en_US": "Select collection"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "collection"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "New Arrivals"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "detail",
			"default": "bottom_center"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_fill"
		},
		{
			"type": "card_input_number",
			"label": {
				"zh_CN": "产品总数量",
				"en_US": "Total quantity of products"
			},
			"max": 1000,
			"min": 1,
			"id": "product_number",
			"default": 8
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "PC每排数量",
				"en_US": "PC number per row"
			},
			"id": "pc_number",
			"max": "5",
			"min": "3",
			"default": "4"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "移动端每排数量",
				"en_US": "Number of mobile terminals per row"
			},
			"id": "wap_number",
			"max": "2",
			"min": "1"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
			"collection": {
				"id": "",
				"title": ""
			},
			"title": "Collection",
			"detail": "",
			"is_fill": false,
			"product_number": "8",
			"pc_number": "4",
			"wap_number": "2",
			"more_text": "View More"
		},
		"blocks": []
	},
	"icon": "icon-zhuanjishangpin-1"
}
{% endschema %}